<!--
 * @Author: your name
 * @Date: 2021-08-17 16:39:31
 * @LastEditTime: 2021-08-24 11:30:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_study\src\views\detail\Detail.vue
-->
<template>
  <div>
    <NavBar>
      <template v-slot:center> 商品详情:{{ id }} </template>
    </NavBar>

    <van-image
      style="margin-top: 50px"
      width="100%"
      lazy-load
      :src="detail.cover_url"
    />

    <van-card
      style="text-align: left"
      :num="detail.stock"
      :price="detail.price + '.00'"
      :desc="detail.description"
      :title="detail.title"
    >
      <template #tags>
        <van-tag plain type="danger" v-show="detail.is_recommend">热卖</van-tag>
        <van-tag plain type="danger" v-show="!detail.is_recommend"
          >推荐</van-tag
        >
      </template>
      <template #footer>
        <!-- <img src="~assets/images/collect1.png" alt=""> -->
        <van-button type="warning" @click="handleAddCart"
          >加入购物车</van-button
        >
        <van-button type="danger" @click="goToCart">立即购买</van-button>
      </template>
    </van-card>

    <van-tabs v-model="active">
      <van-tab title="概述">
        <div class="content" v-html="detail.details"></div>
      </van-tab>
      <van-tab title="热评">
        <div v-for="item in detail.comments" :key="item.id">
          <p>{{ item.user_id }}--{{ item.goods_id }}--{{ item.order_id }}</p>
          <div>{{ item.created_at }}+{{ item.reply }}--{{ item.content }}</div>
        </div>
      </van-tab>
      <van-tab title="相关图书">
        <GoodsList :goods="like_goods"></GoodsList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import GoodsList from "components/content/goods/GoodsList";
import { useRoute,useRouter} from "vue-router";
import {useStore} from 'vuex'
import { ref, reactive, onMounted, toRefs } from "vue";
import { getDetail } from "network/detail";
import { addCart } from "network/cart";
import { Toast } from "vant";

export default {
  name: "Detail",
  components: {
    NavBar,
    GoodsList,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store=useStore()

    let active = ref(1);

    let id = ref(0);
    let book = reactive({
      detail: {},
      like_goods: [],
    });

    onMounted(() => {
      id.value = route.query.id;

      getDetail(id.value).then((res) => {
        book.detail = res.goods;
        book.like_goods = res.like_goods;
        console.log(res.goods);
      });
    });

    //添加购物车
    const handleAddCart = () => {
      addCart({
        goods_id: book.detail.id,
        num: 1
      }).then((res) => {
        if (res.status == "204" || res.status == "201") {
          Toast.success("添加成功");
          //设置store中cartCount
          store.dispatch('updateCart')
        }
      });
    };

    //立即购买
    const goToCart = () => {
      addCart({
        goods_id: book.detail.id,
        num: 1
      }).then((res) => {
        if (res.status == "204" || res.status == "201") {
          Toast.success("添加成功");
          //设置store中cartCount
          store.dispatch('updateCart')
          router.push({
            path:'/shopcart'
          })
        }
      });
    };

    return {
      id,
      ...toRefs(book),
      active,
      handleAddCart,
      goToCart,
    };
  },
};
</script>

<style scoped lang="scss">
.content {
  padding: 10px;
}
.content ::v-deep img {
  max-width: 100%;
  height: auto;
}
</style>